<template>
	<!-- 编辑用户信息 -->
	<view class="editUser-main">
		<view class="editUser-image">
			<button class="changeImageBtn" open-type="chooseAvatar" @chooseavatar="changeChooseAvatar">
				<view class="images">
					<image :src="avatarUrl" mode="scaleToFill" class="imageMode"></image>
				</view>
			</button>
		</view>
		<view class="editUser-name" style="margin-top: 80rpx">
			<view class="editUser-label">昵称</view>
			<view class="editUser-input">
				<input type="text" placeholder="请输入" v-model="editUserQuery.nickname" />
			</view>
		</view>

		<view class="editUser-name">
			<view class="editUser-label">性别</view>
			<view class="editUser-input">
				<uni-data-checkbox v-model="editUserQuery.gender" :localdata="sexs" />
			</view>
		</view>

		<view class="editUser-name"  @click="openAddress">
			<view class="editUser-label">所在地</view>
			<view class="editUser-input">
				<text v-if="addressInfo">{{ addressInfo }}</text>
				<text style="color: #999" v-else>请选择所在地</text>
			</view>
		</view>

		<!-- 地址选择 -->
		<hwxcAddressSelection
			@subAddress="getSubAddress"
			@changeAddress="getChange"
			ref="addressRef"
			:provinceId="editUserQuery.province_id"
			:cityId="editUserQuery.city_id"
			:areaId="editUserQuery.district_id"
			:provinceListData="provinceList"
			:cityListData="cityList"
			:areaListData="areaList"
		/>
		<view class="editUser-btn" @click="saveEditUser">保存编辑</view>
	</view>
</template>

<script>
import { userProfile, userInfo, commonArea } from '../../api/home/index.js';
import { BASE_URL } from '../../api/baseurl.js';
import { userAddressSave, userAddressDetail } from '../../api/home/index.js';
import hwxcAddressSelection from '../../components/hwxcAddressSelection/hwxcAddressSelection.vue';
import { imageUrl } from '../../utils/tools.js';
export default {
	data() {
		return {
			sexs: [
				{
					text: '女',
					value: 0
				},
				{
					text: '男',
					value: 1
				}
			],
			// 编辑用户表单
			editUserQuery: {
				avatar: '',
				nickname: '',
				gender: 0,
				province_id: '',
				city_id: '',
				district_id: '',
			},
			// 头像信息
			avatarUrl: '',
			// token
			tokenValue: '',
			addressInfo: '',

			provinceList: [],
			cityList: [],
			areaList: []
		};
	},
	async onLoad() {
		await this.getuserInfo();
		await this.getcommonArea();
		await this.getAddressInfo();
		this.tokenValue = await uni.getStorageSync('token');
	},
	components: {
		hwxcAddressSelection
	},
	methods: {
		async getcommonArea() {
			try {
				const provinceData = await commonArea();
				if (provinceData.code == 1) {
					this.provinceList = provinceData.data;
					const cityData = await commonArea({
						pid: this.editUserQuery.province_id || this.provinceList[0].id
					});
					if (cityData.code == 1) {
						this.cityList = cityData.data;
						const areaData = await commonArea({
							pid: this.editUserQuery.city_id || this.cityList[0].id
						});
						if (areaData.code == 1) {
							this.areaList = areaData.data;
						}
					}
				}
			} catch (e) {
				throw Error(e);
			}
		},

		async getChange(info) {
			if (info.type == 'province') {
				this.editUserQuery.province_id = info.id;
				const cityData = await commonArea({
					pid: this.editUserQuery.province_id
				});
				this.cityList = cityData.data;
				this.areaList = [];
			} else if (info.type == 'city') {
				this.editUserQuery.city_id = info.id;
				const areaData = await commonArea({
					pid: this.editUserQuery.city_id
				});
				this.areaList = areaData.data;
			} else if (info.type == 'area') {
				this.editUserQuery.district_id = info.id;
			}
		},

		// 详细地址信息
		async getAddressInfo() {
			console.log(this.editUserQuery);
			if (this.editUserQuery.district_id) {
				let provinceInfo = this.provinceList.filter((item) => {
					if (item.id == this.editUserQuery.province_id) {
						return item;
					}
				});

				let cityInfo = this.cityList.filter((item) => {
					if (item.id == this.editUserQuery.city_id) {
						return item;
					}
				});

				let areaInfo = this.areaList.filter((item) => {
					if (item.id == this.editUserQuery.district_id) {
						return item;
					}
				});
				this.addressInfo = provinceInfo[0].name + '/' + cityInfo[0].name + '/' + areaInfo[0].name;
			} else {
				this.addressInfo = '';
			}
		},

		// 保存
		async saveEditUser() {
			if (!this.editUserQuery.nickname) {
				return uni.showToast({
					title: '昵称必填',
					icon: 'error'
				});
			}

			if (this.editUserQuery.avatar.indexOf('data:image')>-1) {
				this.editUserQuery.avatar = '';
			}

			try {
				const resData = await userProfile(this.editUserQuery);
				const userData = (await uni.getStorageSync('userInfo')) || '';
				uni.setStorageSync('userInfo', {
					...userData,
					avatar: this.editUserQuery.avatar,
					nickname: this.editUserQuery.nickname
				});

				uni.showToast({
					title: '保存成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack(-1);
				}, 500);
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取用户信息
		async getuserInfo() {
			try {
				const resData = await userInfo();
				const res = resData.data;
				this.editUserQuery = res;
				this.avatarUrl = imageUrl(res.avatar);
			} catch (e) {
				throw Error(e);
			}
		},

		// 获取微信头像
		async changeChooseAvatar(e) {
			await this.select(e.target.avatarUrl);
		},

		//图片上传
		async select(imageUrl) {
			uni.uploadFile({
				url: BASE_URL + 'common/upload',
				filePath: imageUrl,
				name: 'file',
				header: { token: this.tokenValue },
				success: (uploadFileRes) => {
					let path = JSON.parse(uploadFileRes.data);
					this.editUserQuery.avatar = path.data.url;
					this.avatarUrl = path.data.fullurl;
				}
			});
		},

		openAddress() {
			this.$refs.addressRef.show = true;
		},

		getSubAddress() {
			this.getAddressInfo();
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
</style>

<style scoped lang="scss">
.editUser-main {
	box-sizing: border-box;
	padding: 30rpx;
	.editUser-image {
		display: flex;
		align-items: center;
		justify-content: center;
		.changeImageBtn {
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			color: #fff;
			border: none !important;
			padding: 0px !important;
			background-color: transparent !important;
			.images {
				.imageMode {
					width: 180rpx;
					height: 180rpx;
					border-radius: 50%;
					background-color: #f3f3f3;
				}
			}
		}

		::v-deep .uni-file-picker__lists {
			display: none;
		}

		::v-deep .uni-file-picker__files {
			align-items: center;
		}
	}

	.editUser-name {
		display: flex;
		align-items: center;
		min-height: 90rpx;
		font-size: 28rpx;
		border-bottom: 1px #f3f3f3 solid;
		.editUser-label {
			width: 140rpx;
		}
		.editUser-input {
			flex: 1;
		}
	}

	.editUser-btn {
		height: 80rpx;
		background-color: #e43927;
		color: #fff;
		line-height: 80rpx;
		text-align: center;
		border-radius: 80rpx;
		margin-top: 30rpx;
		font-size: 28rpx;
	}
}
</style>
